<template>
  <div id="app">
    <!-- 顶部导航 -->
    <header-top :lightHeightIndex="lightHeightIndex" @changeIndex="changeIndex"></header-top>
    <!-- 内容 -->
    <router-view></router-view>
    <!-- 底部 -->
    <footer-bottom></footer-bottom>
  </div>
</template>

<script>
import headerTop from './components/header-top'
import footerBottom from './components/footer-bottom'
export default {
  name: 'App',
  components:{headerTop,footerBottom},
  data(){
    return{
      // 控制顶部导航组件的高亮位置
      lightHeightIndex:0
    }
  },
  methods:{
    // 改变顶部导航高亮index
    changeIndex(currentIndex){
      this.lightHeightIndex = currentIndex;
    }
  }
}
</script>

<style>
  /* 全局样式 */
  a{
    text-decoration: none;
  }
  /* 文本超出一行时，显示省略号 */
  .text-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 清除浮动与垂直外边距重叠 */
  .clearfix::before,.clearfix::after{
    content: '';
    display: table;
    clear: both;
  }

</style>
